<template>
  <el-dialog title="系数详细配置" :close-on-click-modal="false" :visible.sync="visible" width="60%" top="8vh">
    <basic-container>
      <div style="height: 50vh;" class="avue-crud mb10">
        <el-table :data="dataList" border stripe v-loading="dataListLoading" height="100%" width="98%" ref="multipleTable" @selection-change="handleSelectionChange">
          <el-table-column type="selection" header-align="center" align="center" width="55" fixed="left"></el-table-column>
          <el-table-column prop="bmCode" header-align="center" align="center" label="部门编码" min-width="100px" fixed="left"></el-table-column>
          <el-table-column prop="bmMc" header-align="center" align="center" label="部门名称" min-width="180px" fixed="left"></el-table-column>

          <el-table-column prop="config01" header-align="center" align="center" label="部门系数" min-width="180px">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.config01" :precision="2" :step="0.1" :min="0" @change="tongBu($event,'config01')"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="config02" header-align="center" align="center" label="部门考核基础分" min-width="180px">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.config02" :precision="2" :step="1" :min="0" @change="tongBu($event,'config02')"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="config03" header-align="center" align="center" label="部门考核分级" min-width="150px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.config03" placeholder="请选择部门考核分级" class="xiaLa" style="width: 100px;" @change="tongBu($event,'config03')">
                <el-option
                  v-for="(item,index) in  [{label:'A',value:'A'},{label:'B',value:'B'},{label:'C',value:'C'},{label:'D',value:'D'}]"
                  :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                     :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </basic-container>
    <span slot="footer" class="dialog-footer">

      <el-button type="primary" @click="btnConfirm()">保存</el-button>
      <el-button @click="visible=false" type="primary" plain>取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
/*!
 * 系数详细配置
 *
 * @author lxl
 * @date 2021-9-7 13:57:58
 */

import {fetchListXxPz, saveOrUpdatByDeptCodeXxPz} from '@/api/jiangjin/jiangjinjggxxspz'

export default {
  data() {
    return {
      visible: false,
      dataList: [],
      dataListLoading: true,
      //翻页
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      deptId: ''
    }
  },
  methods: {
    init(deptId) {
      this.visible = true;
      this.deptId = deptId;
      this.dataList = [];
      this.getDataList();
    },
    // 获得数据
    getDataList() {
      this.dataListLoading = true;
      fetchListXxPz(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, {deptId: this.deptId})).then((res) => {
        this.dataList = res.data.data.records;
        this.totalPage = res.data.data.total;
      })

      this.dataListLoading = false;
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 同步
    tongBu(event, id) {
      for (let i in this.multipleSelection) {
        this.multipleSelection[i][id] = event;
      }
    },
    // 保存
    btnConfirm() {
      saveOrUpdatByDeptCodeXxPz(this.dataList)
        .then(res => {
          this.$notify.closeAll();
          this.$notify.success('修改成功');
          this.visible = false;
        })
        .catch(() => {

        })
    },
  }
}

</script>
